<template>
  <div>
    <div class="top" v-if="axiosPreData">
      <div class="aboveIconfont">
        <p>
          <span class="iconfont icon-moban"></span>
          每日签到
        </p>
        <span class="iconfont icon-bianji" @click="goExitClick"></span>
      </div>
      <div class="information">
        <div class="photo">
          <img
            v-if="axiosPreData.head_img"
            :src="$axios.defaults.baseURL + axiosPreData.head_img"
            alt
          />
          <img v-else src="../../assets/logo.png" alt />
        </div>
        <div class="exhibition">
          <div class="name">{{axiosPreData.nickname}}</div>
          <div
            class="icon-yonghu iconfont"
            :class="{
            nan:axiosPreData.gender,
            nv:!axiosPreData.gender
          }"
          ></div>
        </div>
      </div>
    </div>
    <perBar :iconClass="'icon-kefu'" :myWhat="'我的关注'" @nextClick="$router.push('/attention')"></perBar>
    <perBar :iconClass="'icon-jiagouwuche'" :myWhat="'我的跟帖'" @nextClick="$router.push('/follow')"></perBar>
    <perBar :iconClass="'icon-youjian'" :myWhat="'我的收藏'"  @nextClick="$router.push('/collect')"></perBar>
    <perBar :iconClass="'icon-gouwuche'" :myWhat="'设置'" @nextClick="nextClick"></perBar>
  <div class="goHome">
    <router-link to="/">返回主页</router-link>
  </div>
  </div>
</template>

<script>
import perBar from "../../components/perBar";
export default {
  data() {
    return {
      axiosPreData: null
    };
  },
  methods: {
    nextClick() {
      console.log("子组件被点击了");
    },
    goExitClick() {
      this.$router.push({ path: "/personExit" });
    }
  },
  mounted() {
    this.$axios({
      method: "get",
      url: "/user/" + localStorage.getItem("user_id")
    }).then(res => {
      const { data } = res.data;
      this.axiosPreData = data;
    });
  },
  components: {
    perBar
  }
};
</script>

<style lang="less" scoped>
.top {
  padding: 8.333vw;

  .aboveIconfont {
    display: flex;
    justify-content: space-between;
    .icon-moban {
      padding-right: 2.778vw;
    }
    .icon-bianji {
      font-size: 7.778vw;
      color: #27b060;
      font-weight: 700;
    }
  }
  .information {
    display: flex;
    padding-top: 20px;
    .photo {
      width: 22.223vw;
      height: 22.223vw;
      border-radius: 2.778vw;
      border: 2px solid rgba(213, 226, 243, 0.6);
    }
    .exhibition {
      padding-top: 5.556vw;
      padding-left: 5.556vw;
      display: flex;
      .iconfont {
        padding-left: 10px;
        font-size: 5.556vw;
        font-weight: 700;
      }
      .nan {
        color: #27b060;
      }
      .nv {
        color: pink;
      }
    }
  }
}
.goHome{
  margin: 6.944vw auto;
  text-align: center;
  border: 1.001px solid #000;
  width: 34.722vw;
  height: 11.111vw;
  line-height: 11.111vw;
  border-radius: 5.556vw;
}
</style>